<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>短租规则管理</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <!-- font-awesome -->
  <link rel="stylesheet" href="css/font-awesome.css">
  <!-- layui-CSS -->
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <!-- 页面主样式 -->
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/stylexu.css" />
  <style type="text/css">
    .layui-form-radio span {
      display: none;
    }

    .layui-form-radio i {
      margin-right: -20px;
    }

    #checkedAll {
      cursor: pointer;
    }

    table {
      border: none;
    }

    .layui-top-bd .layui-top-second .layui-input-inline {
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">

    <div class="layui-side layui-bg-black">

      <div class="layui-side-scroll">

        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-vcard"></i><cite>会员管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">微信群发</a>
              </dd>
              <dd>
                <a href="javascript:;">文章管理</a>
              </dd>
              <dd>
                <a href="javascript:;">新建文章</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>车辆审核</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">经销商数据</a>
              </dd>
              <dd>
                <a href="javascript:;">全国平均数据</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>区域后台-统计管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;" class="menu_three ">停车统计</a>
                <ol class="layui-nav-child" style="display: none;">
                  <li><a href="javascript:;">停车日志</a></li>

                </ol>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>

    <div class="layui-body layui-form">
      <div style="padding:20px;padding-top:0px;">
        <!-- 查询条件、按钮组开始 -->
        <div class="layui-row" style="margin-top: 15px;">
          <div class="layui-top-bd">
            <div class="layui-top-first">
              <b>价格管理</b>
              <button class="layui-btn layui-btn-sm layui-bg-blue" type="button" id="addRule">创建<i class="layui-icon"
                  style="font-size: 14px;">&#xe642;</i></button>
              <button class="layui-btn layui-btn-sm layui-bg-blue" type="button" id="updPrice">编辑<i class="layui-icon"
                  style="font-size: 14px;">&#xe642;</i></button>
              <button class="layui-btn layui-btn-sm layui-bg-blue" id="deleteRule" type="button">删除<i class="layui-icon"
                  style="font-size: 14px;">&#xe640;</i></button>
              <button class="layui-btn layui-btn-sm layui-bg-blue" id="openRule" type="button">启用<i class="layui-icon"
                  style="font-size: 14px;">&#xe640;</i></button>
              <button class="layui-btn layui-btn-sm layui-bg-blue" id="stopRule" type="button">停用<i class="layui-icon"
                  style="font-size: 14px;">&#xe640;</i></button>
            </div>
            <div class="layui-top-second">
              <form class="layui-form" id="dailyRentRuleForm" action="selectDailyRentRuleList" method="post">
                <div class="layui-form-item">
                  <div class="layui-input-inline" style="width: 16%;">
                    <select name="ruleStatus" id="status">
                      <option value="">--请选择状态--</option>
                      <option value="1">启用</option>
                      <option value="0">停用</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" name="ruleName" id="ruleName" placeholder="请输入规则名称"
                        autocomplete="off" value="" maxlength="20" onblur="value=value.trim()">
                    </div>
                  </div>
                  <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" id="searchCarPrice"><i
                        class="layui-icon">&#xe615;</i>查询</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- 查询条件、按钮组结束 -->
          <!-- 车辆列表开始 -->
          <table class="layui-table" lay-even="" lay-skin="nob">
            <thead>
              <tr>
                <th>
                  <span id="checkedAll" style="color: blue;">选择</span>
                </th>
                <th>状态</th>
                <th>规则类型</th>
                <th>规则名称</th>
                <th>适用城市</th>
                <th>工作日价格</th>
                <th>双休日价格</th>
                <th>特殊日</th>
                <th>保障规则</th>
                <th>油/电量规则</th>
              </tr>
            </thead>
            <tr>
              <td>
                <input type="radio" name="ruleId" id="ruleId" value="${rentRule.id}">
              </td>
              <td>停用</td>
              <td>短租</td>
              <td>1</td>
              <td>1</td>
              <td>1元/天</td>
              <td>1元/天</td>
              <td>1天</td>
              <td>1条</td>
              <td>1条</td>
            </tr>
            </tbody>
          </table>
          <!-- 分页放这 -->
          <div id="pageDemo" class="layui-t-page"></div>
          <div style="display: none;">
            <input type="hidden" id="page_page" value="1" />
            <input type="hidden" id="page_current" value="1" />
            <input type="hidden" id="page_href" value="selectDailyRentRuleList" />
          </div>
          <!-- 车辆列表 -->
        </div>
      </div>
    </div>
  </div>
  <!-- 新建价格弹出开始 -->
  <div id="addPrice" style="display: none;">
    <!-- 表单部分 -->
    <div style="padding: 20px;">基础规则设置</div>
    <hr>
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">规则类型: </label>
        <div class="layui-input-block">
          <input type="radio" name="ruleType" value="短租" title="短租" disabled checked><span
            style="padding-left: 5px;vertical-align: sub;color:grey;">短租</span>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">规则名称: </label>
        <div class="layui-input-inline">
          <input type="text" name="title" required lay-verify="required" placeholder="请输入规则名称" autocomplete="off"
            class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"><span style="color: red;"><i class="layui-icon">&#x1007;</i>
            请输入规则名称</span></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">适用城市: </label>
        <div class="layui-input-block"
          style="width: 450px;max-height: 300px;overflow-y: scroll;background-color: #e6e6e6;padding: 10px 30px">
          <div style="display: flex;height: 40px;">
            <input type="checkbox" name="" title="长春" lay-skin="primary" checked style="width: 55px;">
            <div>
              <input type="text" name="title" placeholder="请输入最长租赁期限15-30天" autocomplete="off" class="layui-input"
                style="width: 220px;display: inline-block;">
              <span class="layui-word-aux">天</span>
            </div>
          </div>
          <div style="display: flex;height: 40px;">
            <input type="checkbox" name="" title="长春" lay-skin="primary" style="width: 55px;">
          </div>
          <div style="display: flex;height: 40px;">
            <input type="checkbox" name="" title="长春" lay-skin="primary" checked style="width: 55px;">
            <div>
              <input type="text" name="title" placeholder="请输入最长租赁期限15-30天" autocomplete="off" class="layui-input"
                style="width: 220px;display: inline-block;">
              <span class="layui-word-aux">天</span>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">工作日价格: </label>
        <div class="layui-input-inline">
          <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
            class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">元<span style="color: red;padding-left: 10px;">* 默认为每周一至周五的价格</span>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">双休日价格: </label>
        <div class="layui-input-inline">
          <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
            class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">元<span style="color: red;padding-left: 10px;">* 默认为每周六、周日的价格</span>
        </div>
      </div>
    </form>
    <div class="layui-tab" style="margin-top: 40px;">
      <ul class="layui-tab-title">
        <li class="layui-this">节假日价格</li>
        <li>服务保障</li>
        <li>邮费</li>
        <li>电费</li>
      </ul>
      <div class="layui-tab-content" style="padding: 30px 30px 0 30px;">
        <!-- tab1 -->
        <div class="layui-tab-item layui-show">
          <!-- 一个日历模板 -->
          <div style="display: flex;height: 40px;justify-content: center;margin-bottom: 20px;">
            <input type="text" id="rili1"
              style="width:200px;height: 38px;padding-left: 6px;margin-right: 50px;line-height: 1.3;line-height: 38px\9;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;"
              placeholder="选择日期时间段">
            <div style="display: flex;height: 40px;line-height: 40px;">
              <span class="layui-word-aux">价格</span>
              <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input"
                style="width: 120px;display: inline-block;">
              <span class="layui-word-aux">元</span>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
          <!-- 一个日历模板 -->
          <div style="display: flex;height: 40px;justify-content: center;margin-bottom: 20px;">
            <input type="text" id="rili1"
              style="width:200px;height: 38px;padding-left: 6px;margin-right: 50px;line-height: 1.3;line-height: 38px\9;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;"
              placeholder="选择日期时间段">
            <div style="display: flex;height: 40px;line-height: 40px;">
              <span class="layui-word-aux">价格</span>
              <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input"
                style="width: 120px;display: inline-block;">
              <span class="layui-word-aux">元</span>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
          <!-- 一个日历模板 -->
          <div style="display: flex;height: 40px;justify-content: center;margin-bottom: 20px;">
            <input type="text" id="rili1"
              style="width:200px;height: 38px;padding-left: 6px;margin-right: 50px;line-height: 1.3;line-height: 38px\9;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;"
              placeholder="选择日期时间段">
            <div style="display: flex;height: 40px;line-height: 40px;">
              <span class="layui-word-aux">价格</span>
              <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input"
                style="width: 120px;display: inline-block;">
              <span class="layui-word-aux">元</span>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
          <!-- 一个日历模板 -->
          <div style="display: flex;height: 40px;justify-content: center;margin-bottom: 20px;">
            <input type="text" id="rili1"
              style="width:200px;height: 38px;padding-left: 6px;margin-right: 50px;line-height: 1.3;line-height: 38px\9;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 2px;"
              placeholder="选择日期时间段">
            <div style="display: flex;height: 40px;line-height: 40px;">
              <span class="layui-word-aux">价格</span>
              <input type="text" name="title" placeholder="" autocomplete="off" class="layui-input"
                style="width: 120px;display: inline-block;">
              <span class="layui-word-aux">元</span>
            </div>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
        </div>
        <!-- tab2 -->
        <div class="layui-tab-item">
          <div
            style="display: flex;justify-content: space-between;align-items: center;border: 1px solid #e6e6e6;padding: 20px;margin-bottom: 20px;">
            <form class="layui-form" action="" style="width: 600px;">
              <div class="layui-form-item">
                <label class="layui-form-label">保障名称：</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">保障说明：</label>
                <div class="layui-input-block">
                  <textarea name="desc" placeholder="" class="layui-textarea"></textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">保障价格: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">元 / 天
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">是否必选: </label>
                <div class="layui-input-block">
                  <input type="radio" name="ruleType" value="是" title="是" checked><span
                    style="padding-left: 5px;vertical-align: sub;color:grey;">是</span>
                  <input type="radio" name="ruleType" value="否" title="否"><span
                    style="padding-left: 5px;vertical-align: sub;color:grey;">否</span>
                </div>
              </div>
            </form>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
        </div>
        <!-- tab3 -->
        <div class="layui-tab-item">
          <div
            style="display: flex;justify-content: space-between;align-items: center;border: 1px solid #e6e6e6;padding: 20px;margin-bottom: 20px;">
            <form class="layui-form" action="" style="width: 600px;">
              <div class="layui-form-item">
                <label class="layui-form-label">适用城市: </label>
                <div class="layui-form-mid layui-word-aux">长春
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">邮费价格: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">升 / 元
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">服务费: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">元
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">免服务费: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">升(含)以内
                </div>
              </div>
            </form>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
        </div>
        <!-- tab4 -->
        <div class="layui-tab-item">
          <div
            style="display: flex;justify-content: space-between;align-items: center;border: 1px solid #e6e6e6;padding: 20px;margin-bottom: 20px;">
            <form class="layui-form" action="" style="width: 600px;">
              <div class="layui-form-item">
                <label class="layui-form-label">适用城市: </label>
                <div class="layui-form-mid layui-word-aux">长春
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">邮费价格: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">1% / 元
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">服务费: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">元
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">免服务费: </label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off"
                    class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">% (含)以内
                </div>
              </div>
            </form>
            <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">
              <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 价格弹出结束 -->
  <!-- 编辑价格弹出开始 -->

  <!-- 价格弹出结束 -->
  <!-- jQuery -->
  <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
  <!-- layui-JS -->
  <script type="text/javascript" src="./js/layui/layui.js"></script>
  <script type="text/javascript" src="./js/MobilityCarprice.js"></script>
  <script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'upload'], function () {
      $(".menu_three").on("click", function () {

        $(this).next().toggle();
        $.each($(this).parent().siblings(), function (i, e) {
          $(e).find("ol").hide();;
        });

      })
      $("ol").on("click", "li a", function () {
        $.each($(this).parent().siblings(), function (i, e) {
          $(e).find("a").removeClass('three_this')
        });
        $(this).addClass('three_this'); // 添加当前元素的样式
      })

      var form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate,
        form2 = layui.form,
        upload = layui.upload;
      var laypage = layui.laypage,
        layer = layui.layer;
      //显示分页
      var page_page = $("#page_page").val();
      var page_current = $("#page_current").val();
      var page_href = $("#page_href").val();
      var page_status = $("#status").val();
      var page_ruleName = $("#ruleName").val();

      laypage.render({
        elem: 'pageDemo',
        count: page_page,
        curr: page_current || 1, //当前页
        skip: true, //是否开启跳页
        skin: '#586683', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
        theme: '#4B74FF',
        limit: 30,
        groups: 7, //连续显示分页数
        // 			layout: ['count', 'prev', 'page', 'next','skip'],
        layout: ['page'],
        jump: function (obj, first) {
          if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
            if (page_href.indexOf("?") > 0) {
              page_href += "&pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
            } else {
              page_href += "?pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
            }
            window.location.href = encodeURI(page_href);
          }
        }
      });
      // 日历渲染
      laydate.render({
        elem: '#rili1',
        range: true //或 range: '~' 来自定义分割字符
      });
    });

    $('#addRule').click(() => {
      layer.open({
        type: 1,
        title: '创建价格规则',
        area: ['900px', '680px'],
        btn: ['保存', '取消'],
        content: $('#addPrice'),
        yes: function (index, layero) {
        },
        end: function (index, layero) {
        },
      });

    })
  </script>
</body>

</html>